<template>
  <div class="home-box">
    <PageLayout type="home">
      <div class="home-top">
        <div class="home-top-news">
          <div v-if="curTopNewsItem" class="home-top-news-inner">
            <div style="display: flex; align-items: flex-start">
              <div class="tnews-left">
                <img v-if="curTopNewsPic" :src="curTopNewsPic" />
                <img v-else />
              </div>

              <div style="flex: 0 0 40px"></div>

              <div class="tnews-right">
                <div class="tnews-title rl2 nas tse" @click="toNewsDetail(curTopNewsItem)">
                  {{ curTopNewsItem.title }}
                </div>
                <div class="tnews-subtitle">
                  <div class="tnews-subtitle-pic"><img src="@/assets/user.png" /></div>
                  <div class="tnews-subtitle-name">{{ curTopNewsItem.contactsName }}</div>
                  <div class="tnews-subtitle-split"></div>
                  <div class="tnews-subtitle-type">{{ curTopNewsItem.typeName }}/{{ curTopNewsItem.typeItemName }}</div>
                </div>

                <div class="tnews-right-desc rl3">
                  <div v-if="curTopNewsItem.contentInfo" v-html="curTopNewsItem.contentInfo"></div>
                </div>

                <div class="tnews-right-slider">
                  <div
                    v-for="(item, idx) in curTopNewsItem.imgList"
                    :key="idx"
                    class="tnews-right-slider-item nas tse"
                    :class="curTopNewsPicIdx === idx ? 'tnews-right-slider-item-s' : ''"
                    @click="tapTopNewsPic(item)"
                  >
                    <img :src="item" />
                  </div>
                </div>
              </div>
            </div>

            <div v-if="topNewsTotal > 1" class="pagging-box">
              <el-pagination
                :page-size="topNewsPageSize"
                layout="prev, pager, next"
                :total="topNewsTotal"
                @current-change="topNewsPageChanged"
              >
              </el-pagination>
            </div>
          </div>
        </div>

        <div style="flex: 0 0 20px"></div>

        <div class="weekly-news">
          <div class="weekly-news-inner">
            <div class="weekly-news-title">本周强推</div>
            <div class="weekly-news-split"></div>
            <div class="weekly-news-list">
              <div
                v-for="(item, idx) in weeklyList"
                :key="idx"
                class="weekly-news-item nas tse"
                @click="toNewsDetail(item)"
              >
                <div class="weekly-news-item-dot"></div>
                <div class="weekly-news-item-type">[{{ item.typeName }}]</div>
                <div class="weekly-news-item-title rl1">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="home-center-img">
        <img src="@/assets/home-demo.webp" />
      </div>

      <div class="home-center">
        <div class="rec-news">
          <div class="rec-news-inner">
            <div class="rec-news-title">
              <div class="rec-news-title-l">平台推荐</div>
              <!-- <div class="rec-news-title-r">
                <div class="rec-news-title-r-btn nas tse">最新</div>
                <div class="rec-news-title-r-btn rec-news-title-r-btn-s nas tse">热门</div>
              </div> -->
            </div>

            <div style="height: 20px"></div>
            <div class="weekly-news-split"></div>
            <div style="height: 20px"></div>

            <div class="rec-news-list">
              <div v-for="(item, idx) in recList" :key="idx" class="rec-news-item nas tse" @click="toNewsDetail(item)">
                <div class="rec-news-item-l">
                  <img v-if="item.imgList.length > 0" :src="item.imgList[0]" />
                  <img v-else />
                </div>

                <div class="rec-news-item-r">
                  <div class="rec-news-item-r-title rl1" style="width: 211px">
                    {{ item.title }}
                  </div>
                  <div class="rec-news-item-r-subtitle">
                    <div class="rec-news-item-r-subtitle-pic"><img src="@/assets/user.png" /></div>
                    <div class="rec-news-item-r-subtitle-name">{{ item.contactsName }}</div>
                    <div class="rec-news-item-r-subtitle-split"></div>
                    <div class="rec-news-item-r-subtitle-type">{{ item.typeName }}/{{ item.typeItemName }}</div>
                  </div>
                  <div class="rec-news-item-r-desc rl3">
                    <div v-if="item.contentInfo" v-html="item.contentInfo"></div>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="recList2.length > 0" class="weekly-news-split" style="margin-bottom: 20px"></div>
            <div v-if="recList2.length > 0" class="rec-news-list">
              <div v-for="(item, idx) in recList2" :key="idx" class="rec-news-item nas tse" @click="toNewsDetail(item)">
                <div class="rec-news-item-r">
                  <div class="rec-news-item-r-title rl1" style="width: 211px">
                    <span style="color: #7d879f; margin-right: 8px">[{{ item.typeItemName }}]</span>
                    {{ item.title }}
                  </div>
                  <div class="rec-news-item-r-desc rl3">
                    <div v-if="item.contentInfo" v-html="item.contentInfo"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="flex: 0 0 20px"></div>

        <div class="news-cat">
          <div class="news-cat-inner">
            <div class="news-cat-title">信息分类</div>
            <div class="weekly-news-split"></div>
            <div class="news-cat-list">
              <div
                v-for="(item, idx) in newsTypeList"
                :key="idx"
                class="news-cat-item nas tse"
                @click="toCategory(item)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="height: 40px"></div>
    </PageLayout>
  </div>
</template>

<script>
import { getHomeInfo } from '@/api/api'
import PageLayout from '@/components/pageLayout/index'

export default {
  name: 'home',
  components: {
    PageLayout
  },

  data() {
    return {
      curTopNewsPic: '',
      curTopNewsPicIdx: '',
      curTopNewsItem: null,

      topNewsPageSize: 1,
      topNewsPageCount: 1,
      topNewsTotal: 0,

      bannerList: [],
      recList: [],
      recList2: [],
      weeklyList: [],
      newsTypeList: []
    }
  },

  metaInfo() {
    return {
      title: this.$store.state.common.pageTitle,
      meta: [
        { name: 'keywords', content: this.$store.state.common.pageKeywords },
        { name: 'description', content: this.$store.state.common.pageDescription }
      ]
    }
  },

  mounted() {
    this.__getHomeInfo()
  },

  methods: {
    async __getHomeInfo() {
      const res = await getHomeInfo()
      if (res && res.code === 200 && res.result) {
        this.bannerList = res.result.bannerList || []
        this.formatFileUrls(this.bannerList)

        if (this.bannerList.length > 0) {
          this.curTopNewsItem = this.bannerList[0]

          if (this.curTopNewsItem.imgList.length > 0) {
            this.curTopNewsPic = this.curTopNewsItem.imgList[0]
            this.curTopNewsPicIdx = 0
          }

          this.topNewsPageSize = 1
          this.topNewsPageCount = this.bannerList.length
          this.topNewsTotal = this.bannerList.length
        }

        this.recList = res.result.releList || []
        this.formatFileUrls(this.recList)

        if (this.recList.length > 9) {
          this.recList2 = this.recList.splice(9, this.recList.length)
        }

        this.weeklyList = res.result.weekList || []
        this.formatFileUrls(this.weeklyList)

        this.newsTypeList = res.result.typeList || []
        this.formatFileUrls(this.newsTypeList)
      }
    },

    formatFileUrls(list) {
      if (!list || list.length === 0) {
        return
      }

      list.forEach((element) => {
        if (element.imgList) {
          const tempArr = element.imgList.split(',')
          const tempArr2 = []
          tempArr.forEach((subElement) => {
            tempArr2.push(this.$filePrefixUrl + subElement)
          })
          element.imgList = tempArr2
        } else {
          element.imgList = []
        }
      })
    },

    topNewsPageChanged(pageIdx) {
      this.curTopNewsItem = this.bannerList[pageIdx - 1]
      if (this.curTopNewsItem.imgList.length > 0) {
        this.curTopNewsPic = this.curTopNewsItem.imgList[0]
        this.curTopNewsPicIdx = 0
      }
    },

    tapTopNewsPic(url, idx) {
      this.curTopNewsPic = url
      this.curTopNewsPicIdx = idx
    },

    toNewsDetail(item) {
      this.$router.push('/newsDetail?type=' + item.typeId + '&id=' + item.id)
    },

    toCategory(item) {
      this.$router.push('/category?type=' + item.typeId + '&id=' + item.id)
      this.$store.dispatch('setSubTypeName', item.name)
    }
  }
}
</script>

<style lang="scss" scoped>
.home-box {
  .home-top {
    display: flex;
    align-items: stretch;

    .home-top-news {
      flex: 1;

      background: #f7f7f7;
      border-radius: 8px;

      .home-top-news-inner {
        padding: 20px;
        flex: 1;

        .tnews-left {
          font-size: 0;

          img {
            width: 232px;
            height: 311px;
            border-radius: 8px;
          }
        }

        .tnews-right {
          flex: 1;

          .tnews-title {
            font-size: 22px;
            font-weight: 500px;
          }

          .tnews-subtitle {
            margin-top: 20px;

            display: flex;
            align-items: center;

            .tnews-subtitle-pic {
              margin-right: 8px;
              font-size: 0;

              img {
                width: 20px;
              }
            }

            .tnews-subtitle-name {
              font-size: 14px;
              color: gray;
            }

            .tnews-subtitle-split {
              width: 1px;
              height: 12px;
              margin-left: 10px;
              margin-right: 10px;
              background: #cccccc;
            }

            .tnews-subtitle-type {
              font-size: 14px;
              color: gray;
            }
          }

          .tnews-right-desc {
            margin-top: 20px;
            font-size: 12px;
            color: gray;
          }

          .tnews-right-slider {
            margin-top: 30px;
            display: flex;
            align-items: center;

            gap: 20px;

            .tnews-right-slider-item {
              font-size: 0;

              img {
                width: 90px;
                height: 115px;
                border-radius: 4px;
              }
            }

            .tnews-right-slider-item-s {
              border: 4px solid #f4aa69;
              border-radius: 6px;
            }
          }
        }
      }
    }

    .weekly-news {
      flex: 0 0 290px;

      overflow: hidden;

      background: #f7f7f7;
      border-radius: 8px;

      .weekly-news-inner {
        padding: 20px;

        .weekly-news-title {
          font-size: 18px;
          padding-bottom: 20px;
        }

        .weekly-news-list {
          height: 270px;
          overflow-x: hidden;
          overflow-y: auto;

          .weekly-news-item {
            margin-top: 16px;
            margin-bottom: 16px;
            font-size: 14px;

            display: flex;
            align-items: center;

            .weekly-news-item-dot {
              flex: 0 0 auto;

              width: 6px;
              height: 6px;
              background: gray;
              border-radius: 50%;
            }

            .weekly-news-item-type {
              flex: 0 0 auto;

              padding-left: 8px;
              padding-right: 8px;
              color: #7d879f;
            }

            .weekly-news-item-title {
              flex: 1;
            }
          }
        }
      }
    }
  }

  .home-center-img {
    margin-top: 20px;
    margin-bottom: 20px;

    font-size: 0px;
    img {
      width: 1440px;
      height: 260px;
      border-radius: 8px;
    }
  }

  .home-center {
    display: flex;
    align-items: flex-start;

    .rec-news {
      flex: 1;

      background: #f7f7f7;
      border-radius: 8px;

      .rec-news-inner {
        padding: 20px;

        flex: 1;

        .rec-news-title {
          display: flex;
          align-items: center;

          .rec-news-title-l {
            flex: 1;
            font-size: 18px;
          }

          .rec-news-title-r {
            display: flex;
            align-items: center;

            .rec-news-title-r-btn {
              margin-left: 10px;
              width: 60px;
              line-height: 32px;
              text-align: center;
            }

            .rec-news-title-r-btn-s {
              color: white;
              border-radius: 4px;
              background: #f4aa69;
            }
          }
        }

        .rec-news-list {
          flex: 1;

          display: flex;
          flex-wrap: wrap;
          gap: 36px;

          .rec-news-item {
            flex: 0 0 338px;
            margin-bottom: 20px;

            display: flex;

            .rec-news-item-l {
              flex: 0 0 auto;

              width: 127px;
              font-size: 0;

              img {
                width: 107px;
                height: 138px;
                border-radius: 4px;
              }
            }

            .rec-news-item-r {
              flex: 1;

              .rec-news-item-r-title {
                font-size: 16px;
              }

              .rec-news-item-r-subtitle {
                margin-top: 10px;

                display: flex;
                align-items: center;

                .rec-news-item-r-subtitle-pic {
                  font-size: 0;

                  img {
                    width: 20px;
                  }
                }

                .rec-news-item-r-subtitle-name {
                  font-size: 14px;
                  color: gray;
                }

                .rec-news-item-r-subtitle-split {
                  width: 1px;
                  height: 12px;
                  margin-left: 10px;
                  margin-right: 10px;
                  background: #cccccc;
                }

                .rec-news-item-r-subtitle-type {
                  font-size: 14px;
                  color: gray;
                }
              }

              .rec-news-item-r-desc {
                margin-top: 10px;
                font-size: 12px;
                color: gray;
              }
            }
          }
        }
      }
    }

    .news-cat {
      flex: 0 0 290px;
      background: #f7f7f7;
      border-radius: 8px;

      .news-cat-inner {
        padding: 20px;

        .news-cat-title {
          font-size: 18px;
          padding-bottom: 20px;
        }

        .news-cat-list {
          margin-top: 20px;

          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .news-cat-item {
            margin-bottom: 10px;
            padding-left: 10px;
            padding-right: 12px;
            font-size: 14px;
            margin-right: 10px;
            line-height: 32px;
            border-radius: 2px;
            background: #ffffff;
            border: 1px solid gray;
          }
        }
      }
    }
  }

  .weekly-news-split {
    width: 100%;
    height: 1px;
    background: #cccccc;
  }

  .pagging-box {
    text-align: center;

    /deep/ .el-pager li {
      background: transparent !important;
    }

    /deep/ .el-pagination .btn-next {
      background: transparent !important;
    }

    /deep/ .el-pagination .btn-prev {
      background: transparent !important;
    }

    /deep/ .el-pager li.active {
      color: #d87925;
      font-size: 20px;
    }
  }
}
</style>
